<template>
  <div class="login-container">
    <el-card :body-style="{ padding: '0' }" class="login-box">
      <div class="login-header">
        <!-- Logo 区域 -->
        <div class="logo-wrapper">
          <div class="logo-placeholder"></div>
        </div>
        <h1 class="title">游云智管</h1>
      </div>
      <el-card :body-style="{ padding: '30px' }">
        <!-- 表单区域 -->
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="form-wrapper" lang="en-hans">
          <!-- 用户名输入框 -->
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              lang="en-hans"
              placeholder="请输入账号"
              @keyup.enter.native="handleLogin">
              <template #prefix>
                <svg-icon class="icon" icon-class="user"/>
              </template>
            </el-input>
          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              lang="en-hans"
              placeholder="请输入密码"
              show-password
              @keyup.enter.native="handleLogin">
              <template #prefix>
                <svg-icon class="icon" icon-class="password"/>
              </template>
            </el-input>
          </el-form-item>

          <!-- 验证码 (如果启用) -->
          <el-form-item v-if="captchaEnabled" prop="code">
            <div class="captcha-wrapper">
              <el-input
                v-model="loginForm.code"
                lang="en-hans"
                placeholder="请输入验证码"
                @keyup.enter.native="handleLogin">
                <template #prefix>
                  <svg-icon class="icon" icon-class="email"/>
                </template>
              </el-input>
              <div class="captcha-img" @click="getCode">
                <img :src="codeUrl" alt="验证码"/>
              </div>
            </div>
          </el-form-item>

          <!-- 记住密码和注册链接 -->
          <div class="options-wrapper">
            <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>

            <router-link v-if="register" class="register-link" to="/register">
              立即注册
            </router-link>
          </div>

          <!-- 登录按钮 -->
          <el-button
            :loading="loading"
            class="login-btn"
            round
            type="primary"
            @click="handleLogin"
          >
            {{ loading ? '登录中...' : '登 录' }}
          </el-button>
        </el-form>
      </el-card>
    </el-card>

    <!-- 底部 -->
    <div class="footer">
      <span>备案号--</span>
    </div>
  </div>
</template>

<script>
import {getCodeImg} from "@/api/login";
import Cookies from "js-cookie";
import {decrypt, encrypt} from '@/utils/jsencrypt'
import Template from "@/views/game/template/index.vue";

export default {
  name: "Login",
  components: {Template},
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      captchaEnabled: false,
      register: true,
      redirect: undefined,
      passwordVisible: false
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: "",
        uuid: this.loginForm.uuid
      };
    },
    handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$message.error('请输入账号和密码');
        return;
      }

      if (this.captchaEnabled && !this.loginForm.code) {
        this.$message.error('请输入验证码');
        return;
      }

      this.loading = true;

      if (this.loginForm.rememberMe) {
        Cookies.set("username", this.loginForm.username, {expires: 30});
        Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
        Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
      } else {
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove('rememberMe');
      }

      this.$store.dispatch("Login", this.loginForm)
        .then(() => {
          this.$router.push({path: /*this.redirect || */"/"}).catch(() => {
          });
        })
        .catch(() => {
          this.loading = false;
          if (this.captchaEnabled) {
            this.getCode();
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

/* 登录框头部 */
.login-header {
  padding: 30px 0;
  text-align: center;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

::v-deep .el-checkbox__label {
  font-size: 12px;
}

.login-box {
  width: 360px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.logo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.title {
  margin: 0 0 25px;
  text-align: center;
  color: #FFF;
  font-size: 24px;
  font-weight: 500;
}

.form-wrapper {
  margin-bottom: 0;

  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }

  ::v-deep .el-input__inner {
    height: 40px;
    border: none;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #dcdfe6;
    border-radius: 0;
    background: transparent;
    padding-left: 30px;

    &:focus {
      border-bottom-color: #409EFF;
    }
  }

  ::v-deep .el-input__prefix {
    left: 0;
  }
}

.captcha-wrapper {
  display: flex;
  align-items: center;

  .captcha-img {
    width: 120px;
    height: 40px;
    margin-left: 10px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.icon {
  font-size: 16px;
  color: #0078D4;
  font-weight: bold;
}

.options-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .register-link {
    font-size: 12px;
    letter-spacing: 2px;
    color: #409EFF;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.el-checkbox__label {
  font-size: 12px;
  letter-spacing: 2px;
}

::v-deep .el-checkbox {
  display: flex;
  align-items: center;
}

/* 登录按钮 */
.login-btn {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  height: 35px;
  width: 100%;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  margin-top: 35px;
  box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 117, 252, 0.4);
}

.login-btn:active {
  transform: translateY(1px);
}

.footer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}
</style>
